<template>
  <div>
    <div>
      <button @click="toggleTarget">
        {{show ? "hide target" : "show target"}}
      </button>
      <button @click="setHtml">
        set html content
      </button>
      <button @click="setVNode">
        set vnode content
      </button>
    </div>
    <target v-model="show" :content="content"></target>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, h, VNode, onMounted } from 'vue';
import Target from './target.vue';

export default defineComponent({
  components: {
    Target
  },
  setup() {
    const show = ref(false);
    const content = ref<string | VNode>('');
    const toggleTarget = () => {
      show.value = !show.value;
    };
    const setHtml = () => {
      content.value = "<h2>html content</h2>";
    };
    const setVNode = () => {
      content.value = h(
        "h2",
        {},
        "vnode content"
      );
    };
    onMounted(() => {
      setVNode();
    });
    return {
      show,
      toggleTarget,
      content,
      setHtml,
      setVNode
    };
  }
});
</script>
